<template>
  <div>
      <p @click="change" :class="['left_title',{'left_title_active':selIndex===index?true:false}]">{{item.title}}</p>
  </div>
</template>

<script>
export default {
    props:{
        item:Object,
        index:Number,
        selIndex:Number
    },
    methods:{
        change() {
            this.$store.dispatch('getselIndex',this.index);
            this.$emit("changeSelIndex");
        }
    }

}
</script>

<style scoped>
.left_title {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0.01rem 0.01rem;
}
.left_title_active {
    color: red;
    border-left: 5px solid red;
}
</style>